<%--
  Created by IntelliJ IDEA.
  User: 25306
  Date: 2025/10/14
  Time: 下午2:28
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<html>
<head>
    <meta charset="UTF-8">
    <title>我的课程</title>
    <link rel="stylesheet" href="${pageContext.request.contextPath}/css/bootstrap.min.css">
    <link rel="stylesheet" href="${pageContext.request.contextPath}/iconfont/font_0/iconfont.css">
    <link rel="stylesheet" href="${pageContext.request.contextPath}/css/style.css">
    <style type="text/css">
        .file {
            position: relative;
            display: inline-block;
            background: #D0EEFF;
            border: 1px solid #99D3F5;
            border-radius: 4px;
            padding: 4px 12px;
            overflow: hidden;
            color: #1E88C7;
            text-decoration: none;
            text-indent: 0;
            line-height: 20px;
            width: 100%;
            text-align: center;
        }

        .file:hover {
            background: #AADFFD;
            border-color: #78C3F3;
            color: #004974;
            text-decoration: none;
        }

        .file:focus {
            background: #AADFFD;
            border-color: #78C3F3;
            color: #004974;
            text-decoration: none;
        }

        html, body {
            height: 100%;
        }

        body > .wrap-cc {
            min-height: 100%;
        }

        .content-cc {
            /* padding-bottom 等于 footer 的高度 */
            padding-bottom: 80px;
        }

        .footer-cc {
            width: 100%;
            height: 80px;
            /* margin-top 为 footer 高度的负值 */
            margin-top: -80px;
        }
    </style>
    <script src="${pageContext.request.contextPath}/js/jquery.min.js"></script>
    <script src="${pageContext.request.contextPath}/js/bootstrap.min.js"></script>
    <script src="${pageContext.request.contextPath}/js/bootstrap-paginator.js"></script>
    <script src="${pageContext.request.contextPath}/js/bootstrap-mypaginator.js"></script>
    <script>
        $(function () {
            let choose ="${choose}"|| "study" ;

            if (choose === "resource") {
                $('.cc-source').show();
                $('.cc-course').hide();
                $('.source').addClass('current').siblings().removeClass("current");
            } else {
                $('.cc-course').show();
                $('.cc-source').hide();
                $('.current').show();
            }

            $(".arrow").click(function () {
                $(this).parent().next().toggle();

            })

            $(".title-ul>li").on('click', function () {
                console.log($(this).attr("show"));
                $('.' + $(this).attr("show")).show().siblings().hide();

                $(this).addClass('current').siblings().removeClass("current");

            })


            $(".source-modify").on('click', function () {
                $("#user_source").modal("show");
            });



            // 最近学习
            $("#myPages01").bootstrapPaginator({
                bootstrapMajorVersion: 3,
                currentPage: "${userRePage.pageNum == 0 ? 1 : userRePage.pageNum}",
                totalPages: "${userRePage.pages == 0 ? 1 : userRePage.pages}",
                size: "normal",
                alignment: "center",
                pageUrl: function (type, page, current) {
                    return "${pageContext.request.contextPath}/userResource/findAll?pageNo=" + page + "&choose=study";
                }
            });
            // 我的资源
            $("#myPages02").bootstrapPaginator({
                bootstrapMajorVersion: 3,
                currentPage: "${userRePage02.pageNum == 0 ? 1 : userRePage02.pageNum}",
                totalPages: "${userRePage02.pages == 0 ? 1 : userRePage02.pages}",
                size: "normal",
                alignment: "center",
                pageUrl: function (type, page, current) {
                     return "${pageContext.request.contextPath}/userResource/findMy?pageNo=" + page + "&choose=resource";
                }
            });

            //修改显示默认值
            $(".source-modify").click(function () {
                $.ajax({
                    type: "post",
                    url: "${pageContext.request.contextPath}/userResource/findById",
                    data: {"id": $(this).attr("data-id")},
                    dataType: "json",
                    success: function (result) {
                        if (result.responseCode == "2001") {
                            // result.returnObject-->ProductType
                            $("#form-control-title").val(result.returnObject.title);
                            $("#file-cost-type").val(result.returnObject.costType);
                            $("#form-control-number").val(result.returnObject.costNumber);
                            $("#form-control-course-id").val(result.returnObject.id);
                            console.log($("#form-control-course-id").val());
                        } else {
                            alert(result.message);
                        }
                    }
                })
            })

            // 修改资源
            $("#updateById").click(function () {
                let formData = new FormData($("#addCourseResourceForm")[0]);
                $.ajax({
                    type: "post",
                    url: "${pageContext.request.contextPath}/userResource/updateByRe",
                    data: formData,
                    processData: false,
                    contentType: false,
                    dataType: "json",
                    success: function (result) {

                        if (result.responseCode == "2001") {
                            location.href = "${pageContext.request.contextPath}/userResource/findMy?pageNo=${userRePage02.pageNum == 0 ? 1 : userRePage02.pageNum}";
                        } else {
                            alert(result.message);
                        }
                    }
                })
            })
            // 添加资源
            $("#updateById02").click(function () {
                let formData = new FormData($("#addCourseResourceForm02")[0]);
                $.ajax({
                    type: "post",
                    url: "${pageContext.request.contextPath}/userResource/addByRe",
                    data: formData,
                    processData: false,
                    contentType: false,
                    dataType: "json",
                    success: function (result) {

                        if (result.responseCode == "2001") {
                            location.href = "${pageContext.request.contextPath}/userResource/findMy?pageNo=${userRePage02.pageNum == 0 ? 1 : userRePage02.pageNum}";
                        } else {
                            alert(result.message);
                        }
                    }
                })
            })

            $(".btn-danger").click(function () {
                $.ajax({
                    type: "post",
                    url: "${pageContext.request.contextPath}/userResource/deleteByRe",
                    data: {"id": $(this).attr("data-id")},
                    dataType: "json",
                    success: function (result) {
                        if (result.responseCode == "2001") {
                            location.href = "${pageContext.request.contextPath}/userResource/findMy?pageNo=${userRePage02.pageNum == 0 ? 1 : userRePage02.pageNum}";
                        } else {
                            alert(result.message);
                        }
                    }
                });
            })

            $(".look").click(function() {
                let resourceId = $(this).attr("data-id");
                let resourceFileType = $(this).attr("data-type");

                console.log(resourceId);
                console.log(resourceFileType);
                if("mp4"== resourceFileType){
                    $.ajax({
                        type: 'post',
                        url: '${pageContext.request.contextPath}/course/addBuyResource',
                        data: {"resourceId": resourceId},
                        dataType: "json",
                        success: function(result) {
                            if (result.responseCode == "2001") {
                                location.href = "${pageContext.request.contextPath}/course/findVideo?id="+resourceId;
                            } else {
                                alert(result.message);
                            }
                        }

                    });
                }else if("pdf"==resourceFileType){
                    location.href ="${pageContext.request.contextPath}/resource/Download?id="+resourceId;
                    alert("正在下载，请稍后");
                }
            });

            $("#userSetForm").on("submit", function(e) {
                e.preventDefault();
                let formData = new FormData($("#userSetForm")[0]);
                $.ajax({
                    type: "post",
                    url: "${pageContext.request.contextPath}/user/UserInformationUpdate",
                    data: formData,
                    dataType: "json",
                    processData: false,
                    contentType: false,
                    success: function (result) {
                        if (result.responseCode == "2001") {
                            alert("更新成功！");
                            window.location.href = "${pageContext.request.contextPath}/showIndex";
                        } else {
                            alert(result.message);
                        }
                    }
                });
                return false;
            });

        })



        function openAdd() {
            $("#add_user_source").modal("show");
        }

        function fileUpload(item) {
            $(item).click();
        }

        function fileChange(item) {
            var file = item.files[0]; //获取选中的第一个文件
            $(".file").html(file.name);
            //console.log("file", file.name);
        }


    </script>
</head>

<body>
<div class="wrap-cc">
    <div class="content-cc">
        <nav class="navbar navbar-default">
            <div class="container">
                <!-- Brand and toggle get grouped for better mobile display -->
                <div class="navbar-header">
                    <!--  <a class="navbar-brand" href="#">Brand</a> -->
                    <img src="${pageContext.request.contextPath}/images/com-logo1.png" alt="" width="120" style="margin-right: 20px;">
                </div>
                <!-- Collect the nav links, forms, and other content for toggling -->
                <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
                    <ul class="nav navbar-nav">
                        <li><a href="#" class="vertical-middle">免费课程</a></li>
                        <li><a href="#" class="vertical-middle">职业路径</a></li>
                    </ul>
                    <form class="navbar-form navbar-left searchInput" style="padding:10px;">
                        <div class="form-group">
                            <input type="text" class="form-control " placeholder="Search">
                        </div>
                        <button type="submit" class="btn btn-default "><span class="glyphicon glyphicon-search"></span>
                        </button>
                    </form>
                    <ul class="nav navbar-nav navbar-right">
                        <li class="dropdown">
                            <a href="#" class="dropdown-toggle user-active" data-toggle="dropdown" role="button">
                                <img class="img-circle" src="${pageContext.request.contextPath}/images/user.png" id="userImg">
                                <span class="caret"></span>
                            </a>
                            <ul class="dropdown-menu userinfo cc">
                                <li>
                                    <img src="${pageContext.request.contextPath}/images/user.png" class="img-circle" alt="">
                                    <div class="">
                                        <p>我叫${user.nickname}</p>
                                        <p>金币<span>${user.allGold}</span>&nbsp;积分 <span>${user.allPoint}</span></p>
                                    </div>
                                </li>
                                <li>
                                    <a href="${pageContext.request.contextPath}/userResource/findAll">
                                        <i class="glyphicon glyphicon-edit"></i>我的课程
                                    </a>
                                    <a href="${pageContext.request.contextPath}/goldPoints/findAll">
                                        <i class="glyphicon glyphicon-record"></i>积分记录
                                    </a>
                                </li>
                                <li>
                                    <a href="#" data-toggle="modal" data-target="#userSet">
                                        <i class="glyphicon glyphicon-cog"></i>个人设置
                                    </a>
                                    <a href="${pageContext.request.contextPath}/showIndex"><i class="glyphicon glyphicon-off"></i>退出登录</a>
                                </li>
                            </ul>
                        </li>
                    </ul>
                </div>
                <!-- /.navbar-collapse -->
            </div>
            <!-- /.container-fluid -->
        </nav>
        <div class="container-fluid banner">
            <div class="container banner-mycourse">
                <div class="row">
                    <p>${user.nickname}</p>
                </div>
                <div class="row">
                    <img src="images/girl.png" alt="" width="18">&nbsp;&nbsp;
                    <span>学习时长</span>&nbsp;
                    <span>94小时</span>&nbsp;
                    <span>积分0</span>&nbsp;
                    <span>经验256</span>
                </div>
                <div class="row">
                    这位同学很懒，木有签名的说~~
                </div>
            </div>
        </div>
        <div class="container">
            <div class="row">
                <ul class="title-ul">
                    <li class="current" show='cc-course' id="byResource">最近学习</li>
                    <li class="source" show='cc-source' id="myResource">我的资源</li>
                </ul>
                <div>
                    <!-- 最近学习 -->
                    <ul class="mycourse-content cc-course">
                        <c:forEach items="${userRePage.list}" var="userRe">
                            <li>
                                <div class="col-md-1 col-sm-1">
                                    <strong>${userRe.year}</strong>
                                    <div>
                                            ${userRe.day}
                                    </div>
                                </div>
                                <div class="col-md-11 col-sm-11">
                                    <span class="circle"></span>
                                    <div class="row  border-bottom">
                                        <div class="col-md-3">
                                            <img src="${pageContext.request.contextPath}/images/3.jpg"
                                                 alt="" height="120" class="mycourseImg look" data-id="${userRe.resource.id}" data-type="${userRe.resource.fileType}">
                                        </div>
                                        <div class="col-md-8 mycourse-info">
                                            <p class="padding-top-25">
                                        <span>
                                                ${userRe.resource.title}
                                        </span>
                                                    <%--                                                <span>--%>
                                                    <%--                                         更新至3-1--%>
                                                    <%--                                     </span>--%>
                                            </p>
                                            <p class="padding-10">
                                                <span>${userRe.resource.originalName}</span> &nbsp;&nbsp;&nbsp;&nbsp;
                                                <span>

                                        </span> &nbsp;&nbsp;&nbsp;&nbsp;
                                                <span>
                                            ${userRe.resource.fileSize}.KB
                                        </span>
                                            </p>
                                            <div>
                                                <div>
                                                    笔记 0
                                                </div>
                                                <div>
                                                    代码0
                                                </div>
                                                <div>
                                                    问答0
                                                </div>
                                                <div >
                                                    <div class="look" data-id="${userRe.resource.id}" data-type="${userRe.resource.fileType}">
                                                        继续学习
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </li>
                        </c:forEach>

                        <div style="text-align: center;">
                            <ul id="myPages01"></ul>
                        </div>

                    </ul>
                    <!-- 我的资源 -->
                    <ul class="mycourse-content cc-source">
                        <li style="text-align: right;margin-top:20px; ">
                            <button class="btn btn-primary" onclick="openAdd()" style="width: 100px;">添加资源</button>
                        </li>
                        <c:forEach items="${userRePage02.list}" var="userRe02">
                            <li>
                                <div class="col-md-1 col-sm-1">
                                    <strong>${userRe02.year}</strong>
                                    <div>
                                            ${userRe02.day}
                                    </div>
                                </div>
                                <div class="col-md-11 col-sm-11">
                                    <span class="circle"></span>
                                    <div class="row  border-bottom">
                                        <div class="col-md-3">
                                            <img src="${pageContext.request.contextPath}/images/3.jpg" alt="" height="120" class="mycourseImg">
                                        </div>
                                        <div class="col-md-8 mycourse-info">
                                            <p class="padding-top-25">
                                        <span>
                                                ${userRe02.title}
                                        </span>

                                            </p>
                                            <p class="padding-10">
                                                <span>${userRe02.fileType}</span> &nbsp;&nbsp;&nbsp;&nbsp;
                                                <span>
                                            ${userRe02.fileSize}KB
                                        </span> &nbsp;&nbsp;&nbsp;&nbsp;
                                                <span>
                                            xxx
                                        </span>
                                            </p>
                                            <div>
                                                <c:if test="${userRe02.costType == 0}">
                                                    <div>
                                                        积分制
                                                    </div>
                                                </c:if>
                                                <c:if test="${userRe02.costType == 1}">
                                                    <div>
                                                        金币
                                                    </div>
                                                </c:if>
                                                <div>
                                                        ${userRe02.costNumber}
                                                </div>
                                                <div>
                                                    zbwroom
                                                </div>
                                                <div class="nostyle">
                                                    <button class="btn btn-warning source-modify" id="source-modify" data-id="${userRe02.id}">修改</button>
                                                    <button class="btn btn-danger" id="btn-danger" data-id="${userRe02.id}">删除</button>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </li>
                        </c:forEach>
                        <div style="text-align: center;">
                            <ul id="myPages02"></ul>
                        </div>
                    </ul>

                </div>
            </div>



        </div>
        <div class="modal fade" id="userSet" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
            <div class="modal-dialog" role="document">
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                            <span aria-hidden="true">&times;</span>
                        </button>
                        <h4 class="modal-title" id="myModalLabel">个人信息</h4>
                    </div>
                    <form action="#" class="form-horizontal" method="post" id="userSetForm">

                        <input type="hidden" name="id" value="${user.id}" />

                        <div class="modal-body">
                            <div class="form-group">
                                <label class="col-sm-3 control-label">旧密码：</label>
                                <div class="col-sm-6">
                                    <input class="form-control" type="password" name="oldPassword" />
                                </div>
                            </div>
                            <!-- 修改为正确的新密码字段 -->
                            <div class="form-group">
                                <label class="col-sm-3 control-label">新密码：</label>
                                <div class="col-sm-6">
                                    <input class="form-control" type="password" name="newPassword" />
                                </div>
                            </div>
                            <!-- 保留一个确认密码字段 -->
                            <div class="form-group">
                                <label class="col-sm-3 control-label">确认密码：</label>
                                <div class="col-sm-6">
                                    <input class="form-control" type="password" name="confirmPassword" />
                                </div>
                            </div>
                            <div class="form-group">
                                <label class="col-sm-3 control-label">昵称：</label>
                                <div class="col-sm-6">
                                    <input class="form-control" type="text" name="nickname" />
                                </div>
                            </div>
                            <div class="form-group">
                                <label class="col-sm-3 control-label">邮箱：</label>
                                <div class="col-sm-6">
                                    <input class="form-control" type="text" name="email" />
                                </div>
                            </div>
                        </div>
                        <div class="modal-footer">
                            <button type="button" class="btn btn-info" data-dismiss="modal" aria-label="Close">关&nbsp;&nbsp;闭</button>
                            <button type="reset" class="btn btn-info">重&nbsp;&nbsp;置</button>
                            <button type="submit" class="btn btn-info">确&nbsp;&nbsp;定</button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
        <!-- 资源模态框 -->
        <div class="modal fade" id="user_source" tabindex="-1" role="dialog" aria-labelledby="mySourceModalLabel">
            <div class="modal-dialog" role="document">
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                            <span aria-hidden="true">&times;</span>
                        </button>
                        <h4 class="modal-title" id="mySourceModalLabel">资源</h4>
                    </div>
                    <form enctype="multipart/form-data"  class="form-horizontal" id="addCourseResourceForm" method="post">
                        <div class="modal-body">
                            <div class="form-group">
                                <label class="col-sm-3 control-label">标题：</label>
                                <div class="col-sm-6">
                                    <input class="form-control" id="form-control-title" type="text" name="title"/>
                                </div>
                            </div>
                            <input type="hidden" class="form-control" id="form-control-course-id" type="text" name="id"/>
                            <div class="form-group">
                                <label class="col-sm-3 control-label">资源：</label>
                                <div class="col-sm-6">
                                    <a href="javascript:fileUpload('#course-resource-file');" class="file">选择文件</a>
                                    <input type="file" name="file" style="display: none;"
                                           onchange="fileChange(this)" id="course-resource-file"/>
                                </div>
                            </div>
                            <div class="form-group">
                                <label class="col-sm-3 control-label">资源花费类型：</label>
                                <div class="col-sm-6">
                                    <select class="form-control" id="file-cost-type" name="costType">
                                        <option value="-1">请选择</option>
                                        <option value="0">积分</option>
                                        <option value="1">金币</option>
                                    </select>
                                </div>
                            </div>
                            <div class="form-group">
                                <label class="col-sm-3 control-label">花费值：</label>
                                <div class="col-sm-6">
                                    <input class="form-control" id="form-control-number" type="text" name="costNumber"/>
                                </div>
                            </div>
                        </div>
                        <div class="modal-footer">
                            <button type="button" class="btn btn-info" data-dismiss="modal" aria-label="Close">关&nbsp;&nbsp;闭</button>
                            <button type="button" class="btn btn-info" id="updateById" >确&nbsp;&nbsp;定</button>
                        </div>
                    </form>

                </div>
            </div>
        </div>

        <div class="modal fade" id="add_user_source" tabindex="-1" role="dialog" aria-labelledby="mySourceModalLabel">
            <div class="modal-dialog" role="document">
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                            <span aria-hidden="true">&times;</span>
                        </button>
                        <h4 class="modal-title" id="mySourceModalLabel02">添加资源</h4>
                    </div>
                    <form enctype="multipart/form-data"  class="form-horizontal" id="addCourseResourceForm02" method="post">
                        <div class="modal-body">
                            <div class="form-group">
                                <label class="col-sm-3 control-label">标题：</label>
                                <div class="col-sm-6">
                                    <input class="form-control" id="form-control-title02" type="text" name="title"/>
                                </div>
                            </div>
                            <div class="form-group">
                                <label class="col-sm-3 control-label">资源：</label>
                                <div class="col-sm-6">
                                    <a href="javascript:fileUpload('#course-resource-file02');" class="file">选择文件</a>
                                    <input type="file" name="file" style="display: none;"
                                           onchange="fileChange(this)" id="course-resource-file02"/>
                                </div>
                            </div>
                            <div class="form-group">
                                <label class="col-sm-3 control-label">资源花费类型：</label>
                                <div class="col-sm-6">
                                    <select class="form-control" id="file-cost-type02" name="costType">
                                        <option value="-1">请选择</option>
                                        <option value="0">积分</option>
                                        <option value="1">金币</option>
                                    </select>
                                </div>
                            </div>
                            <div class="form-group">
                                <label class="col-sm-3 control-label">花费值：</label>
                                <div class="col-sm-6">
                                    <input class="form-control" id="form-control-number02" type="text" name="costNumber"/>
                                </div>
                            </div>
                        </div>
                        <div class="modal-footer">
                            <button type="button" class="btn btn-info" data-dismiss="modal" aria-label="Close">关&nbsp;&nbsp;闭</button>
                            <button type="button" class="btn btn-info" id="updateById02" >确&nbsp;&nbsp;定</button>
                        </div>
                    </form>

                </div>
            </div>
        </div>

</div>
</div>
<div class="footer-cc">
    <div class="footer">
        <div>
            版权所有： 南京网博
        </div>
        <div>
            Copyright © 2017 imooc.com All Rights Reserved | 京ICP备 13046642号-2
        </div>
    </div>
</div>


</body>

</html>